
<template>
    <div
        class="float-brif-comp" :class="{'brif-off-box': !isExpand}"
            ref="uiFloatMenu" 
            :style="{backgroundImage:'url('+ (isExpand ? menubgImg : menubgImgS) +')'}"
        >
            <div class="brif-wrap">
                <!-- <div class="title-box" 
                    @mousedown="down"
                    @touchstart="down"
                    @mousemove="move"
                    @touchmove="move"
                    @mouseup="end"
                    @touchend="end" -->
                <div class="title-box" 
                    @mousedown="down"
                    @mousemove="move"
                    @mouseup="end"
                    :style="{backgroundImage:'url('+ (isExpand ? menubgImg : menubgImgS) +')'}"
                >
                    <div class="title-txt" v-lang="{lang: controlSto.language, lgid: -23}" @click="jumpTop">Basic Information</div>
                    <div class="act-box" @click.stop="toggelExpand">
                        <el-image class="act-img" :src="isExpand ? gathImg:gathOpen" fit="contain" />
                    </div>
                    <div style="writing-mode:vertical-lr" v-if="!isExpand">unfold</div>
                </div>
                <div class="brif-cont-box" v-show="isExpand">
                    <!-- <slot name="menucont">
                    </slot> -->
                    <div class="brif-box">
                        <div v-for="(item, index) in menuList" :key="'menu_' + item.code">
                            <p class="brif-item brif-item-main" :class="{'brif-item-on': item.code == anchorCode, 'brif-item-onColor': index == anchorIndex}" @click.stop="toJump(item, 1, index)">
                                <span  class="label-link-txt" v-lang="{lang: controlSto.language, lgid: item.lgid}">{{ item.menuName }}</span>
								<span class="act-box"  @click.stop="toExpand(item, index)" v-if="item.children && item.children.length > 0">
									<el-image class="act-img" :src="minuImg" fit="contain" v-if="item.isExpend" />
									<el-image class="act-img" :src="addImg" fit="contain" v-else />
								</span>
							</p>
                            <template v-if="item.isExpend">
								<p class="brif-item brif-item-sub" :class="{'brif-item-on': v.code == anchorCode}" v-for="(v, indx) in item.children" :key="'t2_' + v.code + indx" @click.stop="toJump(v, 2, index, item)">
									<span class="brif-spot"></span>
                                    <span v-lang="{lang: controlSto.language, lgid: v.lgid}">{{ v.tmenuName }}</span>
								</p>
							</template>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</template>

<script setup>
    import { reactive, ref, toRefs, onMounted, getCurrentInstance, computed, watch, unref  } from 'vue'
    import { controlStore } from '@/stores/control'

    import menubgImg from '@/assets/img/menubg.png'
    import gathImg from '@/assets/img/gath.png'
    import gathOpen from '@/assets/img/gathOpen.png'
    import addImg from '@/assets/img/add.png'
	import minuImg from '@/assets/img/minu.png'
    import menubgImgS from '@/assets/img/bgBrif.png'
    
    let uiFloatMenu = ref(null);

    const isExpand = ref(true);
    const controlSto = controlStore();
    const props = defineProps({
        menuList: {
            default: () => [],
            type: Array
        },
        anchorCode: {
            type: String,
            default: '' 
        }
    })
    const emits = defineEmits(['toExpand', 'toJump'])
    const anchorIndex = ref(-1);
    const toExpand = (item, i) => {
        emits('toExpand', item, i, item.isExpend)
    }
    const toJump = (v, t, index, item) => {
        anchorIndex.value = index;
        emits('toJump', v, t, index, item)
    }

    const vwh = computed(()=> {
        return {
            wid: controlSto.clientWidth, 
            hei: controlSto.clientHeight
        }
    });

    const flags = ref(false); 
    const position = reactive({
        x: 0,
        y: 0
    }); 
    const nx = ref(''); 
    const ny = ref(''); 
    const dx = ref(''); 
    const dy = ref(''); 
    const xPum = ref(''); 
    const yPum = ref(''); 


    // const dataObj = reactive({
    //     isRunAud: false
    // });

    onMounted(()=> {
    });

    
    const toggelExpand = ()=> {
        isExpand.value = !isExpand.value;
    };

    const jumpTop = () => {
        window.scrollTo({top: 0, behavior: 'smooth' });
    }
    const down = ()=> {
        flags.value = true;
        var touch;
        if (event.touches) {
            touch = event.touches[0];
        } else {
            touch = event;
        }
        position.x = touch.clientX;
        position.y = touch.clientY;
        dx.value = uiFloatMenu.value.offsetLeft;
        dy.value = uiFloatMenu.value.offsetTop;
    };
    const move = ()=> {
        if (flags.value) {
            var touch;
            if (event.touches) {
                touch = event.touches[0];
            } else {
                touch = event;
            }
            nx.value = touch.clientX - position.x;
            ny.value = touch.clientY - position.y;
            xPum.value = dx.value + nx.value;
            yPum.value = dy.value + ny.value;
            let width = window.innerWidth - uiFloatMenu.value.offsetWidth; //屏幕宽度减去自身控件宽度
            let height = window.innerHeight - uiFloatMenu.value.offsetHeight; //屏幕高度减去自身控件高度


            xPum.value < 0 && (xPum.value = 0);
            yPum.value < 0 && (yPum.value = 0);
            xPum.value > width && (xPum.value = width);
            yPum.value > height && (yPum.value = height);
            // if (this.xPum >= 0 && this.yPum >= 0 && this.xPum<= width &&this.yPum<= height) {
            uiFloatMenu.value.style.left = xPum.value + "px";
            uiFloatMenu.value.style.top = yPum.value + "px";
            // }
            //阻止页面的滑动默认事件
            document.addEventListener(
                "touchmove",
                function () {
                    event.preventDefault();
                },
                false
            );
        }
    };
    const end = ()=> {
        flags.value = false;
    };


    const resetMicPos = (obj)=> {
        if(uiFloatMenu.value) {
            // uiFloatMenu.value.style.left = (obj.wid - 100) + "px";
            // uiFloatMenu.value.style.top = (obj.hei - 120) + "px";
            uiFloatMenu.value.style.left ='0px';
            uiFloatMenu.value.style.top = '80px';
        }
        // console.log(controlSto.clientWidth, controlSto.clientHeight);
    };
    watch(() => vwh.value, (v) => {
        if (v) {
            resetMicPos(v);
        }
    }, { immediate: true, deep: true });

</script>

<style lang='scss' scoped>
    .float-brif-comp {
        margin-top: 75px;
        width: 236px;
        border-radius: 5px;
        box-shadow: 0px 2px 12px 0px #967846;
        touch-action: none;
        transition: width 0.5s ease-out, height 0.5s ease-out;
        // background: url('../assets/img/bgBrif.png');
        &.brif-off-box {
            width: 32px;
            // height: 32px;
            .title-box {
                transition: width 0.5s ease-out, height 0.5s ease-out; 
                width: 32px;
                height: 114px;
                // min-height: 114px;
                display: flex;
                flex-direction: column;
                // background: url('@/assets/img/bgBrif.png');
                // background-size: 100% 100%;
                .title-txt {
                    display: none;
                }
            }
            .brif-cont-box {
                display: none;
            }
        }   
        .brif-cont-box {
            // max-height: 60vh;
            overflow-y: auto;
        }
        .brif-wrap {
            width: 100%;
            height: 100%;
            // display: flex;
            // justify-content: space-around;
            // align-items: center;
            // -webkit-touch-callout: none;
            // -webkit-user-select: none;
            // -moz-user-select: none;
            // -ms-user-select: none;
            // transition: all 0.3s;
        }
        .title-box {
            width: 100%;
            height: 80px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-weight: 600;
            font-size: 18px;
            color: #fff;
		    background-size: 100% 100%;
            // cursor: grab;
            cursor: grabbing;
            transition: all 0.3s;
            .title-txt {
                transition: all 0.3s;
            }
            .act-box {
                position: relative;
                height: 16px;
                bottom: 2px;
                cursor: pointer;
                transition: all 0.3s;
                .act-img {
                    height: 16px;
                    transition: all 0.3s;
                }
            }
        }
        .brif-cont-box {
            background-color: #fff;
            transition: width 0.5s ease-out, height 0.5s ease-out; 
            transition: all 0.3s;
            .brif-box {
                .brif-item {
                    position: relative;
                    padding: 24px;
                    border-bottom: 1px solid #E6C896;
                    font-weight: 600;
                    font-size: 14px;
                    text-align: left;
                    cursor: pointer;
                    &.brif-item-onColor {
                        color: #967846;
                    }
                    &.brif-item-on {
                        color: #967846;
                        background: linear-gradient( 90deg, rgba(188,159,119,0.2) 0%, rgba(188,159,119,0) 100%);
                    }
                    .act-box {
                        position: absolute;
                        right: 10px;
                        height: 16px;
                        // border: 1px dashed ;
                        .act-img {
                            width: 16px;
                        }
                    }
                    .brif-spot {
                        position: relative;
                        display: inline-block;
                        width: 4px;
                        height: 4px;
                        bottom: 3px;
                        right: 6px;
                        border-radius: 50%;
                        background-color: #BC9F77;
                    }
                }
                .brif-item-sub {
                    padding-left: 36px;
                }
            }
        }
    }
</style>
